var DragChooseColor = function () {
    var panel = $('chooseColorPopup');
    var title = panel.getElement('.popupTitle');
    var beginPos = {};
    var beginMouse = {};
    var moved = {};
    var events = {
        windowMouseMove: function (e) {
            new Event(e).stop();
            moved.x = e.clientX - beginMouse.x;
            moved.y = e.clientY - beginMouse.y;
            panel.setStyles({
                top: moved.y + beginPos.top,
                left: moved.x + beginPos.left
            });
        },
        titleMouseDown: function (e) {
            new Event(e).stop()
            beginPos.top = Number.toInt(panel.getStyle('top'));
            beginPos.left = Number.toInt(panel.getStyle('left'));
            title.setStyle('cursor', 'move');
            beginMouse.x = e.clientX;
            beginMouse.y = e.clientY;
            document.addEvent('mousemove', events.windowMouseMove);
            document.addEvent('mouseup', events.windowMouseUp);
            document.ondrag = function () { return false }
        },
        windowMouseUp: function (e) {
            title.setStyle('cursor', '');
            document.removeEvent('mousemove', events.windowMouseMove);
            document.removeEvent('mouseup', events.windowMouseUp)
            document.ondrag = null;
        }
    }
    title.addEvent('mousedown', events.titleMouseDown);
};

window.addEvent('domready', function(){
	new DragChooseColor();		
	/*bgcolor = $('bgBodyInput');
	bgcolor.addEvent('change',function(){
		color = this.options[this.selectedIndex].value;		
		document.body.setStyle('background', 'url("images/background/'+ color +'")');
	});*/
	
	new MooRainbow('bgblockColor', {
		id: 'mybgblockColor',
		startColor: [HexToR(jsbgblock), HexToG(jsbgblock), HexToB(jsbgblock) ],
		wheel: true,		
		onChange: function(color) {
			$('all').getElements('.left-column').setStyle('background', color.hex);
			$('bgblockColorInput').value = color.hex;
			$('bgblockColor').setStyle('background-color', color.hex);
		},
		onComplete: function(color) {
			$('all').getElements('.left-column').setStyle('background', color.hex);
			$('bgblockColorInput').value = color.hex;
			$('bgblockColor').setStyle('background-color', color.hex);
		}
	});
	
	new MooRainbow('bgWallColor', {
		id: 'mybgWallColor',
		startColor: [HexToR(jsbgwall), HexToG(jsbgwall), HexToB(jsbgwall) ],
		wheel: true,		
		onChange: function(color) {
			$('all').getElements('.main-content').setStyle('background', color.hex);
			$('bgWallColorInput').value = color.hex;
			$('bgWallColor').setStyle('background-color', color.hex);
		},
		onComplete: function(color) {
			$('all').getElements('.main-content').setStyle('background', color.hex);
			$('bgWallColorInput').value = color.hex;
			$('bgWallColor').setStyle('background-color', color.hex);
		}
	});
	
	
	new MooRainbow('textWallColor', {
		id: 'mytextWallColor',
		startColor: [HexToR(jstextwall), HexToG(jstextwall), HexToB(jstextwall) ],
		wheel: true,		
		onChange: function(color) {
			$('all').getElements('.main-content').setStyle('color', color.hex);
			$('textWallColorInput').value = color.hex;
			$('textWallColor').setStyle('background-color', color.hex);			
		},
		onComplete: function(color) {
			$('all').getElements('.main-content').setStyle('color', color.hex);
			$('textWallColorInput').value = color.hex;
			$('textWallColor').setStyle('background-color', color.hex);
		}
	});
	
	/*menu*/
	new MooRainbow('textWallLinkColor', {
		id: 'mytextWallLinkColor',
		startColor: [HexToR(jstextwalllink), HexToG(jstextwalllink), HexToB(jstextwalllink) ],
		wheel: true,		
		onChange: function(color) {
			$('main-content').getElements('a').setStyle('color', color.hex);
			$('textWallLinkColorInput').value = color.hex;
			$('textWallLinkColor').setStyle('background-color', color.hex);	
		},
		onComplete: function(color) {			
			$('main-content').getElements('a').setStyle('color', color.hex);
			$('textWallLinkColorInput').value = color.hex;
			$('textWallLinkColor').setStyle('background-color', color.hex);	
		}
	});
	
	new MooRainbow('linecolor', {
		id: 'mylinecolor',
		startColor: [HexToR(jsline), HexToG(jsline), HexToB(jsline) ],
		wheel: true,		
		onChange: function(color) {
			//$('menu').getElements('span').setStyle('color', color.hex);						
			$('lineColorInput').value = color.hex;
			$('linecolor').setStyle('background-color', color.hex);
		},
		onComplete: function(color) {
			//$('menu').getElements('span').setStyle('color', color.hex);			
			$('lineColorInput').value = color.hex;
			$('linecolor').setStyle('background-color', color.hex);
		}
	});
	
	new MooRainbow('tabcolor', {
		id: 'mytabcolor',
		startColor: [HexToR(jstab), HexToG(jstab), HexToB(jstab) ],
		wheel: true,		
		onChange: function(color) {
			$('menu').getElements('.active').setStyle('color', color.hex);			
			//$('menu').getElements('.active').setStyle('border', '1px solid ' + color.hex);
			$('tabColorInput').value = color.hex;
			$('tabcolor').setStyle('background-color', color.hex);
		},
		onComplete: function(color) {
			$('menu').getElements('.active').setStyle('color', color.hex);			
			//$('menu').getElements('.active').setStyle('border', '1px solid ' + color.hex);
			$('tabColorInput').value = color.hex;
			$('tabcolor').setStyle('background-color', color.hex);
		}
	});
	
	new MooRainbow('menuTextColor', {
		id: 'mymenuTextColor',
		startColor: [HexToR(jsmenutext), HexToG(jsmenutext), HexToB(jsmenutext) ],
		wheel: true,		
		onChange: function(color) {
			$('menu').getElements('a').setStyle('color', color.hex);
			$('menuTextColorInput').value = color.hex;
			$('menuTextColor').setStyle('background-color', color.hex);
		},
		onComplete: function(color) {
			$('menu').getElements('a').setStyle('color', color.hex);
			$('menuTextColorInput').value = color.hex;
			$('menuTextColor').setStyle('background-color', color.hex);
		}
	});
	
	/*address*/
	new MooRainbow('addressColor', {
		id: 'myaddressColor',
		startColor: [HexToR(jsaddress), HexToG(jsaddress), HexToB(jsaddress) ],
		wheel: true,		
		onChange: function(color) {
			$('all').getElements('.address').setStyle('color', color.hex);
			$('addressColorInput').value = color.hex;
			$('addressColor').setStyle('background-color', color.hex);
		},
		onComplete: function(color) {			
			$('all').getElements('.address').setStyle('color', color.hex);
			$('addressColorInput').value = color.hex;
			$('addressColor').setStyle('background-color', color.hex);
		}
	});
	
	new MooRainbow('phoneColor', {
		id: 'myphoneColor',
		startColor: [HexToR(jsphone), HexToG(jsphone), HexToB(jsphone) ],
		wheel: true,		
		onChange: function(color) {
			$('all').getElements('.phone').setStyle('color', color.hex);
			$('phoneColorInput').value = color.hex;
			$('phoneColor').setStyle('background-color', color.hex);
		},
		onComplete: function(color) {			
			$('all').getElements('.phone').setStyle('color', color.hex);
			$('phoneColorInput').value = color.hex;
			$('phoneColor').setStyle('background-color', color.hex);	
		}
	});
	
	new MooRainbow('hourColor', {
		id: 'myhourColor',
		startColor: [HexToR(jshour), HexToG(jshour), HexToB(jshour) ],
		wheel: true,		
		onChange: function(color) {
			$('hour_operation').getElements('.title').setStyle('color', color.hex);
			$('hourColorInput').value = color.hex;
			$('hourColor').setStyle('background-color', color.hex);
		},
		onComplete: function(color) {
			$('hour_operation').getElements('.title').setStyle('color', color.hex);
			$('hourColorInput').value = color.hex;
			$('hourColor').setStyle('background-color', color.hex);
		}
	});
	
	new MooRainbow('hourTextColor', {
		id: 'myhourTextColor',
		startColor: [HexToR(jshourtext), HexToG(jshourtext), HexToB(jshourtext) ],
		wheel: true,		
		onChange: function(color) {
			$('hour_operation').getElements('.hour_detail').setStyle('color', color.hex);						
			$('hourTextColorInput').value = color.hex;
			$('hourTextColor').setStyle('background-color', color.hex);
		},
		onComplete: function(color) {
			$('hour_operation').getElements('.hour_detail').setStyle('color', color.hex);			
			$('hourTextColorInput').value = color.hex;
			$('hourTextColor').setStyle('background-color', color.hex);
		}
	});
		
	/* set color default*/
	/*color = $('color');
	color.addEvent('change',function(){
		value = this.options[this.selectedIndex].value;		
		url = 'getcolor.php?folder=layout1&color=' + value;
		new Ajax(url, {
		    method: "get",		    
		    onComplete: function() {		      
		       var x = eval('(' + this.response.text + ')');
		       if(x.bgbody){
			       document.body.setStyle('background', 'url("templates/layout1/images/colors/bg/'+ x.bgbody +'")');
	               for(t=0; t< $('bgBodyInput').length;t++ ){
	               	if(x.bgbody == $('bgBodyInput')[t].value)
	               		 $('bgBodyInput')[t].selected = 1;
	               }
		       }else{
		    	   document.body.setStyle('background-color', x.body);	
		       }
		       	       
		       $('bodyColorInput').value = x.body;
			   $('bodyColor').setStyle('background-color', x.body);
			   $('jv-header').getElements('.jv-block').setStyle('background', x.main);
				$('jv-mainnav').getElements('.jv-block').setStyle('background', x.main);
				$('jv-container').getElements('.jv-block').setStyle('background', x.main);
				$('jv-footer').getElements('.jv-block').setStyle('background', x.main);
				$('mainColorInput').value = x.main;
				$('mainColor').setStyle('background-color', x.main);
			   document.body.setStyle('color', x.colorbody);
			   $('bodyTextColorInput').value = x.colorbody;
			   $('bodyTextColor').setStyle('background-color', x.colorbody);
			   document.getElements('a').setStyle('color', x.colora);
			   $('bodyLinkColorInput').value = x.colora;
			   $('bodyLinkColor').setStyle('background-color', x.colora);	
			   
			   $('menu').getElements('.mainmenu').setStyle('background', 'url("templates/layout1/images/trans-menu.png") repeat-x scroll left top ' + x.bgmenu );
				$('menu').getElements('.mainmenu').setStyle('border' , '1px solid '+ x.bgmenu);			
				$('menuBgColorInput').value = x.bgmenu;
				$('menuBgColor').setStyle('background-color', x.bgmenu );
				$('menu').getElements('span').setStyle('color', x.menutext);
				$('menuTextColorInput').value = x.menutext;
				$('menuTextColor').setStyle('background-color', x.menutext);				
				$('menu').getElements('.active').setStyle('color', x.menubgcolor);	
				$('menuActiveColorInput').value = x.menubgcolor;
				$('menuActiveColor').setStyle('background-color', x.menubgcolor);
				
				$('jv-sidebar1').getElements('.title').setStyle('background', x.borderblock);	
				$('jv-sidebar1').getElements('.jv-module').setStyle('border', '1px solid ' + x.borderblock);
				$('welcome').getElements('.title').setStyle('background', x.borderblock);	
				$('welcome').getElements('.jv-module').setStyle('border', '1px solid ' + x.borderblock);
				$('blockBgColorInput').value = x.borderblock;
				$('blockBgColor').setStyle('background-color', x.borderblock);
				
				$('jv-sidebar1').getElements('.title').setStyle('color', x.titleblock);
				$('welcome').getElements('.title').setStyle('color', x.titleblock);
				$('blockTextColorInput').value = x.titleblock;
				$('blockTextColor').setStyle('background-color', x.titleblock);
				
				$('jv-sidebar1').getElements('.contentmod').setStyle('background', x.borderblockmain);
				$('welcome').getElements('.contentmod').setStyle('background', x.borderblockmain);
				$('blockBgMainColorInput').value = x.borderblockmain;
				$('blockBgMainColor').setStyle('background-color', x.borderblockmain);
				
				$('jv-sidebar1').getElements('.active').setStyle('color', x.a_active);	
				$('blockActiveColorInput').value = x.a_active;
				$('blockActiveColor').setStyle('background-color', x.a_active);		
				
				$('jv-content').getElements('.mod-slideshow').setStyle('border', '1px solid ' + x.slideborder);						
				$('slideBorderColorInput').value = x.slideborder;
				$('slideBorderColor').setStyle('background-color', x.slideborder);
				
				$('jv-content').getElements('.slide-controls').setStyle('background', x.slide);						
				$('slideColorInput').value = x.slide;
				$('slideColor').setStyle('background-color', x.slide);
		    }
		}).request();
	});*/
});

//show layer
function showPopupLayer(strId){
	var el = $(strId);			
	if(!el)	return;
	var _opacity = 0.5;		
	var maskObj = $('divPopup'+ strId);
	if(!maskObj) {
		var maskObj = new Element('div',{
			'id': 'divPopup'+ strId,
			'styles':{
				'display': 'block',
				'visibility': 'visible',
				'position': 'fixed',
				'top': 0,
				'left': 0,
				'width': window.getWidth() + 'px',				
				'height': window.getHeight() + 'px',
				'z-index':'1000',
				'backgroundColor': '#000000',
				'opacity': _opacity
			}
		}).injectInside($$('body')[0]);	
	} else {
		maskObj.setStyles({
			'top': 0,
			'opacity': 0.5,
			'width': window.getWidth() + 'px',
			'height': window.getHeight() + 'px'
		});
	}
	 
	el.setStyle('display', 'block');
	var zIndex = 9998;		
	
	el.setStyles({
		'opacity': 1,
		'position': 'absolute',
		'top': (window.getHeight() - el.getCoordinates().height)/2 + window.getScrollTop(),
		'left': (window.getWidth() - el.getCoordinates().width)/2 + 'px',
		'z-index': zIndex
	});
	
	  
	window.addEvent('resize', function(e){			
		var w = window.getWidth();			
		el.setStyles({				
			'top': (window.getHeight() - el.getCoordinates().height)/2 + window.getScrollTop(),
			'left': (window.getWidth() - el.getCoordinates().width)/2 + 'px'				
		});
		if(maskObj) {
			maskObj.setStyles({
				'width': window.getWidth() + 'px',
				'height': window.getHeight() + 'px'
			});
		}
	});
	//add event close 
	if($$('#' + strId + ' a.close')[0]) {
		$$('#' + strId + ' a.close')[0].removeEvents().addEvent('click', function(e){
			new Event(e).stop();	
			hideLayer(strId);
			window.removeEvents();
		});
	}	
}
	
function hideLayer(id){
	if(id && $(id)) $(id).setStyles({
		'top': -1500,
		'opacity': 0
	});

	if($('divPopup'+id)) {
		 
		setTimeout(function(){
			$('divPopup'+id).setStyles({
				'top': -1500,
				'opacity': 0
			});
		}, 500);
	}		
	
	window.removeEvents();
}

function resetColor(){
	document.getElementById('resetColor').value = 1;
	document.getElementById('chooseColor').submit();
}
function setBg(file){
	document.body.setStyle('background', 'url("images/background/'+ file +'")');
	document.getElementById('bgBodyInput').value = file;
}